.pin{
	width: 220px;
	margin-top: 15px;
	float: left;
	z-index: 1;
	position: relative;
	font-size: @smallFont;
	color:@gray;
	background-color:white;
	.border-radius(4px);
  	.puzz-style;
  	&:hover{
  		.puzz-style;
  	}
  	.puzzing{
  		min-height: 50px;
		z-index:2;
  		.puzzing-txt > a {
	  		position: absolute;
			top: 38px;
			bottom: 0px;
			left: 0;
			width: 100%;
			margin: 0;
			z-index:2;
		}
  	}
  	a.long {
		display: block;
		position: relative;
		height: 800px;
		overflow: hidden;
		.stop {
			display: block;
			position: absolute;
			width: 220px;
			height: 20px;
			left: 0;
			bottom: -1px;
			background: url(@{imagePath}/long_image_shadow.png) no-repeat left top;
			z-index: 5;
		}
	}
	.share_img {
		padding: 0;
		display: block;
		overflow: hidden;
		position: relative;
		clear: both;
		.border-radius(4px 4px 0px 0px);
		a,a:hover {
			filter:inherit;
			width:100%;
			display: inline-block;
			float: left;
			position: relative;
		}
		a img {
			.border-radius(4px 4px 0px 0px);
			z-index: 5;
			position: relative;
			zoom:1;
		}
		.goods_price {
			height: 18px;
			line-height: 18px;
			padding: 0 5px;
			position: absolute;
			bottom: 2px;
			right: 1px;
			.opacity(90);
			background-color: @grayLight;
			color:white;
			z-index: 5;
		}
		h4{
			-webkit-font-smoothing: antialiased;
			white-space: nowrap;
			overflow: hidden;
			-ms-text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
			text-overflow: ellipsis;
			.opacity(82);
			bottom: 0;
			color: #f7f7f7;
			left: 0;
			font-size: 12px;
			margin-top: -6px;
			padding: 0 14px;
			position: absolute;
			right: 0;
			top: 50%;
			text-align: center;
			text-shadow: 0 -1px rgba(0,0,0,0.17);
			z-index: 4;
		}
	}
	.share-digist{
		background: url(@{imagePath}/icon-digist.png) no-repeat 0 0;
		background-position: 0 0px;
		position: absolute;
		top:-2px;
		left:-2px;
		width: 38px;
		height: 38px;
		text-indent: 9999px;
		overflow: hidden;
		z-index: 10;
	}
	.share-top{
		background: url(@{imagePath}/icon-top.png) no-repeat 0 0;
		background-position: 0 0px;
		position: absolute;
		top:-2px;
		left:-2px;
		width: 38px;
		height: 38px;
		text-indent: 9999px;
		overflow: hidden;
		z-index: 10;
	}
	.other_img {
		padding: 2px 0px 2px 0px;
		display: block;
		overflow: hidden;
		height: 70px;
		clear: both;
		a,a:hover {
			display: block;
			overflow: hidden;
			width: 109px;
			float: left;
		}
		.img_0 {margin-right: 1px;}
		.img_1 {margin-left: 1px;}
		a img,a:hover img {width: 110px;}
	}
	.other_img_info {
		margin: 2px 0px 2px 0px;
		display: block;
		overflow: hidden;
		height: 23px;
		line-height: 23px;
		text-align: center;
	}
	.share_desc,.share_info {
		padding: 5px 10px 2px 10px;
		display: block;
		overflow: hidden;
		background-color:@white;
		p{
			margin: 5px 0;
			-webkit-font-smoothing: antialiased;
			line-height: 17px;
			word-wrap: break-word;
			color:@grayDark;
		}
	}
	.tool_info{
		padding: 5px 3px 2px 3px;
		display: block;
		background-color:@white;
	}
	.share_comments {
		border-top: @border; 
		.border-radius(4px);
	}
	.share_people,.share_time,.comment {
		padding: 5px 10px 5px 10px;
		background-color:whiteSmoke;
		overflow: hidden;
	}
	.share_social{
		height: 33px;
		line-height: 33px;
		padding: 0px 10px 0px 10px;
		background-color:whiteSmoke;
		.border-radius(0 0 3px 3px);
		.prompt{
			float: left;
		}
	}
	.shareface{
		float: left;
		a,img {
			display: block;
			margin-right: 10px;
			.size(30px,30px);
		}
	}
	
	.shareinfo {
		width: 160px;
		float: left;
		p{
			margin-bottom: 0px;
		}
		textarea {
			.size(30px,140px);
			display: block;
		}
		button {
			display: block;
			margin-top: 3px;
		}
	}
	.tagbox{
		border-top: 3px solid @puzzColor;
		border-left: 1px solid grayLight;
		border-right: 1px solid grayLight;
		border-bottom: 1px solid grayLight;
		.border-radius(4px);
		.tags{
			padding-bottom:0px;
		}
		h4{
			color:@gray;
			a{
				color:@gray;
			}
			a:hover{
				color:@puzzColor;
			}
			a.selected{
				color:@puzzColor;
			}
		}
	}
	.info{
		.border-radius(4px);
		.info-header{
			display: block;
			padding: 10px 10px 5px 10px;
			border-bottom: @border;
		}
		
		.info-content{
			padding: 0px 10px 10px 10px;
			li{
				border-bottom: @borderLight;
			}
		}
	
	}
	.group-member{
			padding: 10px 0px 5px 10px;
	}
	.albumcomment{
		padding: 8px 10px 8px 10px;
		background-color: @white;
		overflow: hidden;
		font-size: @smallFont;
  		line-height: 1.4;
  		border-bottom: @borderLight;
  		h3{
  			font-size: @smallFont;
  			font-weight: normal;
  			line-height: 1.5;
  			margin-top: -2px;
  		}
  		i.time{
  			font-size: @smallFont;
			font-style: normal;
			color: @grayLight;
  		}
		textarea {
			.size(40px,190px);
			display: block;
			margin-bottom: 5px;
		}
	}
	.comactions{
		line-height:25px;
		.smalltxt{
			display: block;
			float: left;
		}
		button{
			float: right;
		}
	}
	p{
		word-break: break-word;
	}
	.topic_desc{
		a{
			display: block;
			padding: 5px 10px 10px 10px;
			border-bottom: @border;
			color:@gray;
			strong{
				display: block;
				font-size: 14px;
				height: 25px;
				line-height: 25px;
				overflow: hidden;
			}
			span{
				line-height: 22px;
				font-size: 12px;
				word-wrap: break-word;
				overflow: hidden;
				zoom: 1;
				display: block;
			}
		}
		p{
			position: relative;
			height: 25px;
			padding: 5px 10px 0px 10px;
			line-height: 25px;
			span{
				display: inline;
				em{
					font-style: normal;
					font-size: 16px;
				}
			}
		}
	}	
}

.puzz{
	.article-title{
		position: relative;
		margin-bottom:10px;
		line-height: 17px;
	}
	.article-content{
		text-align: justify;
		color:@gray;
		text-overflow: ellipsis;
		overflow: hidden;
		word-wrap: break-word;
	}
	.article-time{
		position: absolute;
		bottom: 2px;
		right: 2px;
		color:@gray;
	}
	
}

.article{
	.puzzing{
		padding:10px;
		.puzzing-txt{
			background:none;
		}
		.article-title{
			position: relative;
			margin-bottom:10px;
			line-height: 17px;
			.article-icon{
				background: url(@{imagePath}/flag-title.png) no-repeat 0 0;
				background-position: 0 0px;
				padding-left: 10px;
				margin-right: 10px;
				margin-left: -13px;
				float: left;
				color: white;
				height: 21px;
				.article-icon-i{
					float: left;
					color: white;
					height: 21px;
					background: url(@{imagePath}/flag-title.png) no-repeat 0 0;
					background-position: right 0px;
					background-color: white;
					padding-right: 15px;
				}
			}
		}
		.article-content{
			text-overflow: ellipsis;
			overflow: hidden;
			word-wrap: break-word;
		}
	}
	.share_info{
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.share_time{
		text-align: right;
		color: @grayLight;
	}
	
}
.navmenu{
	color: @gray;
	padding-bottom: 8px;
	border-bottom: @border;
	padding-bottom:10px;
	margin: 0 0 5px 0;
	z-index:22;
	position:relative;
	display:inline-block;
	.navmenu-current,.navtitle{
		margin-left:10px;
		padding: 0 40px 0 36px;
		display:inline-block;
		float:left;
		position:relative;
		background: url(@{imagePath}/navmenu.png) no-repeat 0 0;
		span{
			font: 22px 'microsoft yahei';
			line-height:30px;
		}
		
	}
	.navtitle{
		background: none;
		padding-left: 0px;
		margin-left: 0px;
	}
	.navmenu-item{
		line-height: 30px;
		display:inline-block;
		float:left;
		position:relative;
		a{
			padding: 8px 16px;
			border-radius: 3px;
			font-size: 14px;
			cursor: pointer;
		}
		a.active{
			background-color: lighten(@puzzColor,35%);
			color:@gray;
			font-weight: bold;
		}
	}
	.navmenu-color{
		line-height: 30px;
		display:inline-block;
		position:relative;
		float:right;
		ul.color-chips{
			margin-top:8px;
			margin-right: 5px;
			li:first-child{
				a{
					border-top-left-radius: 4px;
					border-bottom-left-radius: 4px;
				}
			}
			li:last-child{
				a{
					border-top-right-radius: 4px;
					border-bottom-right-radius: 4px;
				}
			}
		}
	}
	.navmenu-price{
		line-height: 30px;
		display:inline-block;
		position:relative;
		float:right;
		ul.price-chips{
			margin-top:5px;
			margin-right: 5px;
		}
	}
}

ul.price-chips {
	margin: 0;
	.border-radius(3px);
	display:inline-block;
	list-style:none;
	border: 1px solid @puzzColor;
	background-color:white;
	li:first-child{
		border:none;
	}
	li {
		padding: 2px 6px 2px 6px;
		font-size: 12px;
		margin: 0;
		float: left;
		border-left: 1px solid @puzzColor;
		a {
			float: left;
			z-index: 1;
			display:block;
		}
		&:hover {
			background-color:@puzzColor;
			a{
				color:white;
			}
		}
	}
	
	li.current, li.current:hover {
		position: relative;
		margin: -2px;
		border: 2px solid @puzzColor;
		background-color:@puzzColor;
		.box-shadow(0 0 3px rgba(0, 0, 0, 0.6));
		.border-radius(3px);
		a{
			color:white;
		}
		z-index: 2;
	}
}
img.lazy {
	.opacity(0);
}
img.lazy.loaded {
	.opacity(100);
}
.shareico {float: left;height: 23px;width: 23px;margin: 5px 2px;
	background: url(@{imagePath}/share_icon.png) no-repeat;
	cursor: pointer;
	display: block;
	overflow: hidden;
	text-align: left;
}
.share_social .shareico_sina {background-position: 0 0;}
.share_social .shareico_qzone {background-position: -28px 0;}
.share_social .shareico_qq {background-position: -56px 0;}
.share_social .shareico_renren {background-position: -84px 0;}
.share_social .shareico_twitter {background-position: -140px 0;}
.share_social .shareico_facebook {background-position: -165px 0;}
.share_social .shareico_sina:hover {background-position: 0 -23px;}
.share_social .shareico_qzone:hover {background-position: -28px  -23px;}
.share_social .shareico_qq:hover {background-position: -56px -23px;}
.share_social .shareico_renren:hover {background-position: -84px  -23px;}
.share_social .shareico_twitter:hover {background-position: -140px -23px;}
.share_social .shareico_facebook:hover {background-position: -165px -23px;}